<template>
  <div>
    <v-dialog ref="dialog" @handleClose="handleSave" :title="form.defId ? '编辑' : '新增'" width="1280px">
      <div class="title">流程基本信息</div>
      <save-form ref="form" :patchData="form" />
      <div class="title">定义流程环节</div>
      <el-table :data="tableData" style="width: 100%">
        <el-table-column label="环节代码" width="120">
          <template slot-scope="scope">
            <el-input v-model="scope.row.actCode" />
          </template>
        </el-table-column>
        <el-table-column label="环节名称">
          <template slot-scope="scope">
            <el-input v-model="scope.row.actName" />
          </template>
        </el-table-column>
        <el-table-column label="处理方式">
          <template slot-scope="scope">
            <el-select v-model="scope.row.actType" placeholder="请选择">
              <el-option label="会签" :value="1" :key="1" />
              <el-option label="或签" :value="0" :key="0" />
            </el-select>
          </template>
        </el-table-column>
        <el-table-column label="环节角色">
          <template slot-scope="scope">
            <el-select v-model="scope.row.roleid" placeholder="请选择">
              <el-option :label="r.name" :value="r.roleid" v-for="r in roles" :key="r.roleid" />
            </el-select>
          </template>
        </el-table-column>
        <el-table-column label="环节用户">
          <template slot-scope="scope">
            <div @click="$refs.saveDialog.dialogVisible = true;current = scope.row;">
              <el-input type="text" placeholder="请选择环节用户" v-model="scope.row.truename" autocomplete="off" readonly></el-input>
            </div>
          </template>
        </el-table-column>
        <el-table-column label="是否可直接申请" width="120px" align="center">
          <template slot-scope="scope">
            <el-switch v-model="scope.row.issq" active-value='1' inactive-value='0' />
          </template>
        </el-table-column>
        <el-table-column label="" width="120px" align="center">
          <template slot-scope="scope">
            <el-button type="primary" size="small" icon="el-icon-plus" circle @click="handleAdd(scope.$index)" />
            <el-button type="default" size="small" icon="el-icon-delete" circle @click="handleRemove(scope.$index)" />
          </template>
        </el-table-column>
      </el-table>
    </v-dialog>
    <v-dialog ref="saveDialog" width="840px" title="请选择审核人" :showConfirm="false" cancelBtnTxt="关闭">
      <save-role-user-form ref="saveItemForm" @selected="selectedShr" :patch-data="{}"></save-role-user-form>
    </v-dialog>
  </div>
</template>

<script>
import saveForm from './saveForm';
import { listByDefid, edit, add } from '#/api/processDef'
import { roleList } from '@/api/roleManage'
import saveRoleUserForm from "./saveRoleUserForm";

export default {
  components: {
    saveForm,
    saveRoleUserForm
  },
  data() {
    return {
      form: {},
      tableData: [],
      roles: [],
      current: {}
    };
  },
  created() {
    this.initData()
  },
  methods: {
    initData() {
      roleList({ pageSize: 1000 }).then(res => {
        this.roles = res.data || [];
        this.roles.forEach((r) => {
          r.roleid = r.roleid + '';
        });
      })
    },
    init(data) {
      this.form = data || {}
      this.tableData = []
      listByDefid({ defId: data.defId }).then(res => {
        this.tableData = res.data || []
        if (this.tableData.length == 0) {
          this.tableData.push({})
        }
        this.$refs.dialog.dialogVisible = true
      })
    },
    handleAdd(index) {
      this.tableData.splice(index + 1, 0, {})
    },
    handleRemove(index) {
      this.tableData.splice(index, 1)
      if (this.tableData.length == 0) {
        this.tableData.push({})
      }
    },
    handleSave() {
      this.$refs.form.validate((data) => {
        let flag = false
        for (const item of this.tableData) {
          if (!item.actCode) {
            flag = true
            this.toast('请填写环节代码', 'warning')
            break
          }
          if (!item.actName) {
            flag = true
            this.toast('请填写环节名称', 'warning')
            break
          }
          if (!item.roleid) {
            flag = true
            this.toast('请选择环节角色', 'warning')
            break
          }
        }
        if (flag) {
          return
        }
        let steps = this.tableData.map((v, i) => {
          let role = this.roles.find(r => r.roleid == v.roleid)

          return { ...v, rolename: role.name, defId: data.defId, bzxh: i }
        })
        data.defid = data.defId;
        let func = data.defId ? edit : add
        this.$refs.dialog.posting = true;
        func({ ...data, stepList: steps }).then(res => {
          this.$refs.dialog.posting = false;
          if (res.code == 200) {
            this.toast("保存成功", "success");
            this.$refs.dialog.close();
            this.$emit('refresh')
          } else {
            this.toast(res.msg, "warning");
          }
        }).catch(() => {
          this.$refs.dialog.posting = false;
        })
      });
    },
    selectedShr(shr) {
      this.current.truename = shr.truename;
      this.current.userid = shr.userid;
      this.current.username = shr.username;
      this.$refs.saveDialog.dialogVisible = false;
    }
  }
}
</script>

<style lang="scss" scoped>
.title {
  font-size: 14px;
  line-height: 20px;
  font-weight: 800;
  color: #222222;
  padding-left: 16px;
  position: relative;
  margin-bottom: 24px;

  &::before {
    content: '';
    position: absolute;
    left: 0;
    top: 2px;
    bottom: 2px;
    width: 4px;
    background-color: #24386A;
  }
}
</style>